@import 'element-plus/theme-chalk/dark/css-vars.css';

html.dark {
  --el-color-black: #cfd3dc;
  --el-color-white: #1d1e1f;
  --el-color-grey: #cfd3dc;
  --el-menu-background-color-second: #1d1e1f;
  --el-border-color: #414243;
  --el-menu-background-color: #1d1e1f;

  --w-e-textarea-bg-color: #1d1e1f;
  --w-e-textarea-color: #fff;
  --w-e-textarea-border-color: #1d1e1f;
  --w-e-textarea-slight-border-color: #1d1e1f;
  --w-e-textarea-slight-color: #1d1e1f;
  --w-e-textarea-slight-bg-color: #1d1e1f;
  --w-e-textarea-selected-border-color: #1d1e1f;
  --w-e-textarea-handler-bg-color: #1d1e1f;
  --w-e-toolbar-color: #fff;
  --w-e-toolbar-bg-color: #1d1e1f;
  --w-e-toolbar-active-color: #fff;
  --w-e-toolbar-active-bg-color: #1d1e1f;
  --w-e-toolbar-disabled-color: #fff;
  --w-e-toolbar-border-color: #1d1e1f;
  --w-e-modal-button-bg-color: #1d1e1f;
  --w-e-modal-button-border-color: #1d1e1f;

  body,
  body[class*='vab-theme-'] {
    color: #cfd3dc !important;
    background-color: var(--el-color-white) !important;

    .vab-nav {
      background: var(--el-color-white) !important;
    }

    [class*='-container'],
    .no-background-container {
      background: var(--el-color-white) !important;
    }

    .table {
      td {
        border: 1px solid var(--el-border-color) !important;
      }
    }

    .vab-column-bar-container .el-tabs .el-tabs__item {
      color: var(--el-color-black) !important;
    }

    .page-header-tip-title {
      color: var(--el-color-black) !important;
    }

    .vab-column-bar-container {
      border-right: 1px solid var(--el-border-color) !important;
      &-arrow {
        .el-tabs {
          .el-tabs__item {
            &.is-active {
              color: var(--el-menu-color-text) !important;
              background: transparent !important;

              .vab-column-grid {
                background: transparent !important;

                &:after {
                  border-color: transparent var(--el-menu-color-text)
                    transparent transparent;
                }
              }
            }
          }
        }
      }
    }

    .vab-tabs-content-card .el-tabs__header .el-tabs__item {
      border: 1px solid var(--el-border-color) !important;
    }

    .vab-column-bar-container .el-tabs .el-tabs__nav {
      margin-left: -1px !important;
      background: var(--el-color-white) !important;
      border-right: 1px solid var(--el-border-color) !important;
    }

    .logo-container-column .logo {
      background: var(--el-color-white) !important;
      border-right: 1px solid var(--el-border-color) !important;
    }

    .vab-footer {
      border-top: 1px dashed var(--el-border-color) !important;
    }

    .notice-clear {
      border-top: 1px solid var(--el-border-color) !important;
    }

    .vab-side-bar {
      border-right: 1px solid var(--el-border-color) !important;
    }

    .vab-header {
      border-bottom: 1px solid var(--el-border-color) !important;

      .logo-container-horizontal {
        height: calc($base-header-height - 1px);
      }

      .vab-main .right-panel {
        [class*='ri-'],
        .username {
          color: var(--el-color-black) !important;
        }
      }
    }
  }

  /* svg */
  [fill='#fff'] {
    fill: var(--el-color-white) !important;
  }

  .el-table {
    th {
      background: var(--el-color-white) !important;
    }
    th.el-table-fixed-column--left,
    th.el-table-fixed-column--right {
      background: var(--el-color-white) !important;
    }
  }
}
